Lookups

Lookup is an advanced inline search form.

SingleSingle › DefaultSingle › ActiveSingle › TypeaheadSingle › With selectionSingledev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-form-element slds-lookup" data-select="single" data-scope="single">
  <label class="slds-form-element__label" for="lookup-01">Parent Account</label>
  <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
    <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
    </svg>
    <input id="lookup-01" class="slds-lookup__search-input slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Search Accounts" />
  </div>
</div>

PolymorphicPolymorphic › DefaultPolymorphic › Object dropdownPolymorphic › ActivePolymorphic › TypeaheadPolymorphic › With selectionPolymorphicdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-form-element slds-lookup" data-select="multi" data-scope="multi">
  <label class="slds-form-element__label" for="lookup-01">Parent Account</label>
  <div class="slds-form-element__control slds-grid slds-box--border">
    <div class="slds-dropdown-trigger--click slds-align-middle slds-m-left--xx-small slds-shrink-none">
      <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
      </svg>
      <button class="slds-button slds-button--icon slds-button-space-left slds-shrink-none">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">Filter</span>
      </button>
    </div>
    <div class="slds-input-has-icon slds-input-has-icon--right slds-grow">
      <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
      </svg>
      <input id="lookup-01" class="slds-lookup__search-input slds-input--bare" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Search Accounts" />
    </div>
  </div>
</div>

Advanced ModalAdvanced ModalprototypeNot Compatible with S1 Mobile

Preview

Code

<div>
  <div aria-hidden="false" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open">
    <div class="slds-modal__container slds-modal--large" role="document" tabindex="0">
      <div class="slds-modal__header">
        <button class="slds-button slds-button--icon-inverse slds-modal__close">
          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
            <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
        <h2 class="slds-text-heading--medium">Account Name</h2>
      </div>
      <div class="slds-modal__content">
        <div class="slds-lookup" data-select="multi" data-scope="single" data-typeahead="true">
          <div class="slds-form-element slds-p-top--medium slds-p-horizontal--medium slds-m-bottom--small">
            <label class="slds-form-element__label" for="lookup">Accounts</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
              <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
              </svg>
              <input id="lookup" class="slds-input" type="text" aria-haspopup="true" aria-autocomplete="list" role="combobox" aria-activedescendant="" />
            </div>
          </div>
          <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover" role="listbox">
            <thead>
              <tr>
                <th colspan="4" scope="col">
                  <div class="slds-float--right">
                    <button class="slds-button slds-button--icon-bare slds-button--icon-x-small">
                      <svg aria-hidden="true" class="slds-button__icon">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
                      </svg>
                      <span class="slds-assistive-text">Filter List</span>
                    </button>
                    <button class="slds-button slds-button--icon-bare slds-button--icon-x-small">
                      <svg aria-hidden="true" class="slds-button__icon">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#sort"></use>
                      </svg>
                      <span class="slds-assistive-text">Sort</span>
                    </button>
                  </div>5 Results, sorted by relevancy</th>
              </tr>
              <tr>
                <th scope="col">
                  <div class="slds-truncate" title="Account Name">Account Name</div>
                </th>
                <th scope="col">
                  <div class="slds-truncate" title="Location">Location</div>
                </th>
                <th scope="col">
                  <div class="slds-truncate" title="Secondary Column">Secondary Column</div>
                </th>
                <th scope="col">
                  <div class="slds-truncate" title="Tertiary Column">Tertiary Column</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">
                  <a id="s01" href="javascript:void(0);" role="option">
                    <div class="slds-truncate" title="Acme Landscape">
                      <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                      </svg>Acme Landscape</div>
                  </a>
                </th>
                <td>
                  <div class="slds-truncate" title="Seattle, WA">Seattle, WA</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Secondary Field">Secondary Field</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Tertiary Field">Tertiary Field</div>
                </td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s02" href="javascript:void(0);" role="option">
                    <div class="slds-truncate" title="ACME Construction">
                      <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                      </svg>ACME Construction</div>
                  </a>
                </th>
                <td>
                  <div class="slds-truncate" title="San Francisco, CA">San Francisco, CA</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Secondary Field">Secondary Field</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Tertiary Field">Tertiary Field</div>
                </td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s03" href="javascript:void(0);" role="option">
                    <div class="slds-truncate" title="Action Sports">
                      <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                      </svg>Action Sports</div>
                  </a>
                </th>
                <td>
                  <div class="slds-truncate" title="Madison, WI">Madison, WI</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Secondary Field">Secondary Field</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Tertiary Field">Tertiary Field</div>
                </td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s04" href="javascript:void(0);" role="option">
                    <div class="slds-truncate" title="Moderno Bistro">
                      <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                      </svg>Moderno Bistro</div>
                  </a>
                </th>
                <td>
                  <div class="slds-truncate" title="Acton, OH">Acton, OH</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Secondary Field">Secondary Field</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Tertiary Field">Tertiary Field</div>
                </td>
              </tr>
              <tr>
                <th scope="row">
                  <a id="s05" href="javascript:void(0);" role="option">
                    <div class="slds-truncate" title="Cozy Kitchen">
                      <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-m-right--x-small">
                        <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                      </svg>Cozy Kitchen</div>
                  </a>
                </th>
                <td>
                  <div class="slds-truncate" title="Acton, CA">Acton, CA</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Secondary Field">Secondary Field</div>
                </td>
                <td>
                  <div class="slds-truncate" title="Tertiary Field">Tertiary Field</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="slds-modal__footer slds-modal__footer--directional">
        <button class="slds-button slds-button--neutral">Cancel</button>
        <button class="slds-button slds-button--neutral">New Account</button>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

Component Overview

The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects.

You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on record home and object home.

Accessibility

Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate ARIA attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology.

Expected markup:

  • Input field has attributes role="combobox", aria-autocomplete="list"
  • Input field has an aria-expanded attribute whose value is false when the results list is hidden, true when the results list is visible
  • Input field has an aria-activedescendant attribute whose value is the id of the highlighted results list option, no value if nothing’s highlighted in the list
  • Results list is an <ul role="presentation">, where each item is containing an <a href="javascript:void(0);" role="option">

Expected keyboard interactions:

  • Character keys filter the list
  • Up and down arrow keys cycle through the available options in the list and update the input field’s aria-activedescendant value
  • Enter key selects highlighted option and collapses the results list
  • Escape key collapses the results list

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-lookup
Applied to:

<div>

Outcome:

Initializes lookup

Required:

Required

Comments:

Accepts [data-select] and [data-scope] attributes with the values of single/multi

.slds-lookup__menu
Applied to:

<div>

Outcome:

Initializes lookup results list container

Required:

Required

Comments:

Applies positioning and container styles

.slds-lookup__list
Applied to:

<ul>

Outcome:

Initializes lookup results list

Required:

Required

Comments:

--

.slds-lookup__item
Applied to:

<li>

Outcome:

Results list item

Required:

Required

Comments:

--

.slds-lookup__item--label
Applied to:

<div>

Outcome:

Non-actionable label inside of a lookup item

Required:

Required

Comments:

--

.slds-lookup__item-action
Applied to:

<a>

Outcome:

Actionable element inside of a lookup item

Required:

Required

Comments:

--

.slds-lookup__item-action--label
Applied to:

.slds-lookup__item-action

Outcome:

Actionable element inside of a lookup item that's output is single line text

Required:

No, optional element or modifier

Comments:

--

.slds-lookup__result-text
Applied to:

<span>

Outcome:

Primary entity name within lookup item

Required:

No, optional element or modifier

Comments:

--

.slds-lookup__result-meta
Applied to:

<a>

Outcome:

Secondary info of primary entity name within lookup item

Required:

No, optional element or modifier

Comments:

--

.slds-lookup__search-input
Applied to:

<input>

Outcome:

Styles for a lookup's form input

Required:

No, optional element or modifier

Comments:

--